<script setup>
import useTable from "@/utils/useTable";
import {http} from "@/api";
import {exportToExcel, getStatus} from "@/utils/common";
import dayjs from 'dayjs'
import {ElMessage} from "element-plus";
/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openEdit,
} = useTable({
  requestFn: http.ProductOrder,
  routerPre: 'ProductOrder',
  format: (data) => {
    return data.map(item => {
      return {
        ...item,
        goods: item.goods || {}
      }
    })
  },
  params: {
    type: '0',
    name: '',
  }
})
const handleClick = () => {
  search()
}
const exportTo = async (res) => {
  const categoryres = await http.Category.page({ pageNum: 1, pageSize: 99999})
  let categoryList = categoryres.data.rows
  res.data.forEach(item => {
    (item.orderGoodsDetails || []).forEach(goodItem => {
      goodItem.good = goodItem.good || {}
      goodItem.good.category = goodItem.good.category || {}
      goodItem.good.subCategory = goodItem.good.category.name
      goodItem.good.firstCategory = categoryList.find(category => category.id === goodItem.good.category.pid)?.name
    })
  })
  console.log(res.data)
  let data = [
    ['订单号', '创建时间','所属一级分类','所属二级分类', '商品名称','商品数量', '商品价格', '商品总价','订单总价','收货人', '收货人电话', '收货地址','收货人出生日期', '收货人八字', '商品备注','商品提示', '其他要求', '下单用户']
  ]
  res.data.forEach(item => {
    // 纵向合并 [,[]]
      if (item.orderGoodsDetails.length < 2) {
        let el = item.orderGoodsDetails[0] || {
          good: {
            name: '',
            price: 0,
          }
        }
        data.push([
          item.order_no,
          item.create_time,
          el.good.firstCategory,
          el.good.subCategory,
          el.good.name,
          el.count,
          el.good.price,
          // 总价
          el.count * el.good.price,
          item.orderGoodsDetails.reduce((prev, cur) => {
            return prev + cur.count * cur.good.price
          }, 0),
          item?.address?.username,
          item?.address?.phone,
          item?.address?.address,
          item?.address?.birthday,
          item?.address?.bazi,
          el.remark,
          el.good.tips,
          item?.remark,
          item?.member.nickname
        ])
      } else {
        let el = item.orderGoodsDetails[0] || {
          good: {
            name: '',
            price: 0,
          }
        }
        data.push([
          item.order_no,
          item.create_time,
          el.good.firstCategory,
          el.good.subCategory,
          el.good.name,
          el.count,
          el.good.price,
          // 总价
          el.count * el.good.price,
          item.orderGoodsDetails.reduce((prev, cur) => {
            return prev + cur.count * cur.good.price
          }, 0),
          item?.address?.username,
          item?.address?.phone,
          item?.address?.address,
          item?.address?.birthday,
          item?.address?.bazi,
          el.remark,
          el.good.tips,
          item?.remark,
          item?.member.nickname
        ])

        item.orderGoodsDetails.slice(1).map(el => {
          data.push([
            '',
            '',
            el.good.firstCategory,
            el.good.subCategory,
            el.good.name,
            el.count,
            el.good.price,
            // 总价
            el.count * el.good.price,
            '',
            '',
            '',
            '',
            '',
            '',
            el.remark,
            el.good.tips,
            '',
            ''
          ])
        })
      }
  })
  exportToExcel('订单明细', data, res.data)
}
const exportAll = () => {
  http.ProductOrder.exportList({
    export_status: 0
  }).then(res => {
    if (res.data.length === 0) {
      ElMessage.error('暂无数据')
      return
    }
    exportTo(res)
    search()
  })
}
const exportAll2 = () => {
  http.ProductOrder.list({
  }).then(res => {
    if (res.data.length === 0) {
      return
    }
    exportTo(res)
  })
}
</script>


<template>
  <PageMain title="商品订单">
    <el-tabs v-model="searchParams.type" @tab-change="handleClick">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="未导出" name="2"></el-tab-pane>
      <el-tab-pane label="已导出" name="3"></el-tab-pane>
    </el-tabs>
    <el-form label-suffix="：" inline>
      <el-form-item label="订单号">
        <el-input v-model="searchParams.order_no" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="danger" @click="exportAll">导出</el-button>
        <el-button type="danger" @click="exportAll2">导出全部</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <el-table :data="dataSource">
        <el-table-column label="订单号" prop="order_no">
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              {{ getStatus(scope.row) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="购买人" prop="member.nickname">
        </el-table-column>
        <el-table-column label="购买人八字" prop="address.bazi">
        </el-table-column>
        <el-table-column label="导出状态" prop="">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-tag :type="scope.row.export_status === 0 ? 'info' : 'success'" >{{ scope.row.export_status === 0 ? '未导出' : '已导出' }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="openEdit(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
      />
    </div>
  </PageMain>
</template>

<style scoped lang="scss">

</style>
